<template>
  <div>
    <!-- 金额 -->
    <div id="part_one">
      <div>
        总实际到账金额
        <p>5800</p>
      </div>
      <div>
        总提现金额
        <p>0</p>

      </div>
    </div>
    <!-- 姓名日期 -->
    <div id="part_two">
      <div>
        <span class="textname">姓名：</span>
        <el-input v-model="input" placeholder="姓名查询"></el-input>
      </div>
      <div>
        <span>申请日期：</span>
        <el-date-picker v-model="value2"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
        </el-date-picker>
      </div>
    </div>
    <!-- 记录数据 -->
    <div id="part_three">
      <div>
      <div class="test">
        全部(0)
      </div>
      <div class="test">
        提现申请(0)
      </div>
      <div class="test">
        提现中(0)
      </div>
      <div class="test">
        提现成功(0)
      </div>
      <div class="test">
        提现失败(0)
      </div>
    </div>
    <div>
      <el-button type="primary">导出数据到Excel</el-button>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <el-button type="primary" icon="el-icon-refresh-right">重置</el-button>
    </div>
      </div>

    <!-- 表格数据 -->
    <div>
      <el-table :data="tableData"
                border
                style="width: 100%;height:400px">
        <el-table-column fixed
                         prop="ID"
                         label="ID"
                         width="150">
        </el-table-column>
        <el-table-column fixed
                         prop="name2"
                         label="姓名"
                         width="150">
        </el-table-column>
        <el-table-column fixed
                         prop="number8"
                         label="身份证"
                         width="150">
        </el-table-column>
        <el-table-column fixed
                         prop="number9"
                         label="手机号"
                         width="150">
        </el-table-column>
        <el-table-column fixed
                         prop="number10"
                         label="提现金额"
                         width="150">
        </el-table-column>
        <el-table-column prop="number11"
                         label="实际到账"
                         width="120">
        </el-table-column>
        <el-table-column prop="number12"
                         label="银行卡"
                         width="120">
        </el-table-column>
        <el-table-column prop="date2"
                         label="申请提现时间"
                         width="120">
        </el-table-column>
        <el-table-column prop="status"
                         label="状态"
                         width="300">
        </el-table-column>
        <el-table-column prop="reason"
                         label="失败原因"
                         width="120">
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="part_five">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage4"
                     :page-sizes="[100, 200, 300, 400]"
                     :page-size="100"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="400">
      </el-pagination>
    </div>
  </div>
</template>
<style scoped>
  #part_one{
    display:flex;
    justify-content:space-around;
    width:50%;
    text-align:center;
  }
  #part_two{
      display:flex;
      justify-content:space-around;
      width:70%;
  }
    #part_two > div {
      display: inherit;
      align-items: center;
    }
  .textname{
      width:60px;
  }
  .test {
    display:inherit;
    width: 106px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
    background-color: transparent;
    margin: 20px;
    justify-content:center;
    align-items:center;
  }

  #part_three {
    width: 95%;
    height: 100px;
    display: flex;
    align-items:center;
    justify-content: space-between;
    margin-left:50px;
  }
  #part_three>div {
    display: flex;
    align-items:center;
    justify-content:space-between;
  }

  .test:hover {
    background-color: #fff;
    border: 1px solid #409eff;
    color: #409eff;
    transition: background-color .5s;
    transition:border .5s;
    transition:color .5s;
  }
  #part_five{
      display:flex;
      justify-content:flex-end;
  }
</style>
